<template>
  <custom-modal
    v-bind="$attrs"
    v-model:visible="visible"
    :height="height"
  >
    <n-scrollbar :style="`max-height: ${height - 121}px;padding: 12px;box-sizing: border-box`">
      <n-form
        :rules="rules"
        :size="size"
      >
        <n-grid :x-gap="16">
          <n-form-item-gi
            v-for="item in list"
            :key="item.key"
            :path="item.key"
            :span="item.span"
            :label="item.label"
          >
            <!-- 输入框 -->
            <n-input
              v-if="item.type === 'input'"
              v-model:value="form[item.key]"
              clearable
              :placeholder="`请输入${item.label}`"
            />
            <!-- 单选 -->
            <n-select
              v-else-if="item.type === 'select'"
              v-model:value="form[item.key]"
              clearable
              class="w100"
              :options="item.options"
              :placeholder="`请选择${item.label}`"
            />
            <!-- 数字 -->
            <n-input-number
              v-else-if="item.type === 'number'"
              v-model:value="form[item.key]"
              min="0"
              class="w100"
              clearable
              :placeholder="`请输入${item.label}`"
            />
            <n-checkbox-group
              v-else-if="item.type === 'checkbox'"
              v-model:value="form[item.key]"
            >
              <n-checkbox
                v-for="option in item.options"
                :key="option.value"
                :value="option.value"
                :label="option.label"
              />
            </n-checkbox-group>
            <!-- 树形选择 -->
            <n-tree-select
              v-else-if="item.type === 'treeSelect'"
              v-model:value="form[item.key]"
              :options="item.options"
              clearable
              key-field="id"
              label-field="name"
            />
            <!-- 单选 -->
            <n-radio-group
              v-else-if="item.type === 'radio'"
              v-model:value="form[item.key]"
              clearable
            >
              <n-radio
                v-for="option in item.options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </n-radio-group>
            <n-tree
              v-else-if="item.type === 'tree'"
              :label-field="item.labelField || 'label'"
              :key-field="item.keyField || 'key'"
              block-line
              cascade
              expand-on-click
              default-expand-all
              :default-expanded-keys="[]"
              :default-checked-keys="form[item.key]"
              checkable
              :selectable="false"
              :data="item.options"
              @update:checked-keys="keys => updateCheckedKeys(keys, item.key)"
            />
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </n-scrollbar>

    <template #footer>
      <n-button @click="emits('cancel')">取消</n-button>
      <n-button
        type="primary"
        @click="emits('confirm')"
        >确认</n-button
      >
    </template>
  </custom-modal>
</template>

<script lang="ts" setup>
  const emits = defineEmits([
    'update:visible',
    'update:form',
    'confirm',
    'cancel',
    'update:configList'
  ])
  const props = withDefaults(
    defineProps<{
      // 是否显示
      visible: boolean
      // 表单数据
      form: Record<string, any>
      // 表单配置
      configList: FormRenderConfig[]
      // 表单验证规则
      rules?: Record<string, any>
      // 表单尺寸
      size?: 'small' | 'medium' | 'large'
      // 表单高度
      height?: number
    }>(),
    {
      visible: false,
      rules: () => ({}),
      size: 'medium',
      height: 400
    }
  )

  const list = useVModel(props, 'configList', emits)

  const visible = useVModel(props, 'visible', emits)

  const form = useVModel(props, 'form', emits)

  function updateCheckedKeys(keys: Array<string | number>, key: string) {
    form.value[key] = keys
  }
</script>

<style scoped lang="scss"></style>
